// eslint-disable-next-line import/no-unresolved
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import React, { Component } from 'react';
import {Row, Col, Alert, Typography, Card} from 'antd';
import { connect } from 'dva';
import styles from './index.less';
import {FormattedMessage} from "umi-plugin-react/locale";

class Demo extends Component {

  removeUserItem(item){

    // 通过props获取dispatch方法，demo表示数据模型（namespace），fetchRemoveItem表示reducers或者effects。
    this.props.dispatch({type:"demo/fetchRemoveItem",item})
  }

  render() {
    const { listInfo } = this.props;
    const userList = [];


    if (listInfo.length>0){
      listInfo.forEach(function (item, index) {
        // userList.push(<li key={index} onClick={that.removeUserItem.bind(that,item)}>{item.name}</li>)
        userList.push(<li key={index}>{item.name}</li>)
      })
    }


    return (
      <PageHeaderWrapper className={styles.main}>
        <Card>
          <Alert
            message="umi ui 现已发布，点击右下角 umi 图标即可使用"
            type="success"
            showIcon
            banner
            style={{
              margin: -12,
              marginBottom: 24,
            }}
          />
          <Typography.Text strong>
            <a target="_blank" rel="noopener noreferrer" href="https://pro.ant.design/docs/block">
              <FormattedMessage
                id="app.welcome.link.block-list"
                defaultMessage="基于 block 开发，快速构建标准页面"
              />
            </a>
          </Typography.Text>
          <Typography.Text
            strong
            style={{
              marginBottom: 12,
            }}
          >
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://pro.ant.design/docs/available-script#npm-run-fetchblocks"
            >
              <FormattedMessage id="app.welcome.link.fetch-blocks" defaultMessage="获取全部区块" />
            </a>
          </Typography.Text>
        </Card>

        {/* <div style={{paddingTop: 100, textAlign: 'center'}}> */}
        {/*  <Spin spinning={loading} size="large"></Spin> */}
        {/* </div> */}
        {/*{userList}*/}
      </PageHeaderWrapper>)
  }

}

// 这里使用析构,拆出state中的demo
// demo对象 即models/demo.js中的state对象
export default connect(({demo}) => ({
  listInfo: demo.listInfo,
}))(Demo);
